<template>
	<div class="my">
		<slot name="one">
			<div class="header">
				<span class="img" @click="ret"><img src="../../public/arrow_left.png" alt=""></span>
				<span class="font">我的</span>
			</div>
		</slot>
		<slot name="two">
			<div class="register" @click="tiao">
				<img src="../js/img/header0.png" alt="">
				<div class="p">
					<p class="logon">{{msg}}</p>
					<p class="tel">
						<img src="../js/img/phoneblue.png" alt="">
						<span class="wu">暂无绑定手机</span>
					</p>
				</div>
				<div class="a">
					<a href="#"><img src="../js/img/next.png" alt="" class="right"></a>
				</div>
			</div>
		</slot>
		<slot name="three">
			<div class="li">
				<router-link to="/balance">
					<div class="yue">
						<p class="changes"><b class="jiacu">0.00</b> <span>元</span></p>
						<p class="balance">我的余额</p>
					</div>
				</router-link>
				<router-link to="/princess">
					<div class="discounts">
						<p class="thren"><b class="jiacu">3</b> <span>个</span></p>
						<p class="i">我的优惠</p>
					</div>
				</router-link>
				<router-link to="/jifen">
					<div class="integral">
						<p class="part"><b class="jiacu">0</b> <span>分</span></p>
						<p class="i">我的积分</p>
					</div>
				</router-link>
			</div>
		</slot>
		<slot name="four">
			<div class="myorder">
				<a href="#" class="int">
					<img src="../js/img/order.png" alt="">
					<div class="indent" @click="mydd">
						我的订单
						<img src="../js/img/jt.png" alt="">
					</div>
				</a>
				<a href="#" class="int">
					<img src="../js/img/integralshop.png" alt="">
					<div class='indent'>
						积分商城
						<img src="../js/img/jt.png" alt="">
					</div>
				</a>
				<a href="#" class="int">
					<img src="../js/img/VIP.png" alt="">
					<div class='indent'>
						饿了么会员卡
						<img src="../js/img/jt.png" alt="">
					</div>
				</a>
			</div>
		</slot>
		<slot name="five">
			<div class="serve">
				<router-link to="/fuw">
				<a href="#" class="serve_center">
					<img src="../js/img/zfx.png" alt="">
					<div class='center'>
						服务中心
						<img src="../js/img/jt.png" alt="">
					</div>
				</a>
				</router-link>
				<router-link to="/xz">
				<a href="#" class="download">
					<img src="../js/img/elmlogo.png" alt="">
					<div class='download_img'>
						下载饿了么APP
						<img src="../js/img/jt.png" alt="">
					</div>
				</a>
				</router-link>
			</div>
		</slot>
		<slot name="six">
			<b_but></b_but>
		</slot>
	</div>
</template>

<script>
	import b_but from "./all_bottom.vue"

	export default {
		components:{
			b_but
		},
		name: 'register',
		data: function() {
			return {
				dats: '',
				msg: '登录/注册',
			}
		},
		components:{
			b_but,
		},
		created() {
			let a = this;
			this.$axios({
				url: 'https://elm.cangdu.org/v1/user',
				method: 'get',
			}).then(function(res) {
				console.log(res.data)
				if (res.data.message == '通过session获取用户信息失败') {
					a.msg = '登录/注册'
				}else {
					// window.console.log('ojsdh')
					a.msg = res.data.username;
				}
				
			})
		},
		methods: {
			ret() {
				this.$router.push('/b_');
			},
			mydd() {
				this.$router.push('/ddList');
			},
			tiao: function() {
				let obj = this;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/user',
					method: 'get',
				}).then(function() {
					if(obj.msg == '登录/注册'){
						obj.$router.push('login')
					}else{
						obj.$router.push('user')
					}
					
				})
				/* if (this.msg == res.data.username) {
					this.$router.push('user')
				}
				this.$router.push('login') */
			}
		}
	}
</script>

<style scoped>
	.jiacu {
		font-weight: 1000;
		font-size: 26px;
	}
	.my {
		width: 320px;
		height: 568px;
		background-color: #F5F5F5;
	}

	.header {
		height: 39px;
		background: #3190E8;
		line-height: 35px;
	}
	.img img {
		width: 10%;
		vertical-align: bottom;
	}
	.font {
		font-size: 16px;
		color: white;
		font-weight: 600;
		margin-left: 112px;
		position: absolute;
		top: 3px;
	}

	.register {
		width: 320px;
		height: 76.66px;
		background-color: #3190E8;
		line-height: 76.66px;
		position: relative;
	}

	.register img {
		width: 50px;
		height: 50px;
		vertical-align: middle;
		margin-left: 15px;
		position: absolute;
		margin-top: 20px;
	}

	.logon {
		font-size: 16px;
		color: white;
		display: inline-block;
		position: absolute;
		margin-top: -30px;
	}

	.p {
		width: 227px;
		height: 40px;
		display: inline-block;
		margin-left: 70px;
		margin-top: 25px;
		position: absolute;
	}

	.wu {
		display: inline-block;
		position: absolute;
		width: 84px;
		margin-top: -11px;
		margin-left: 20px;
	}

	.tel {
		font-size: 12px;
		color: white;
		display: inline-block;
		position: absolute;
	}

	.tel img {
		width: 15px;
		height: 15px;
		position: absolute;
		margin-left: -1px;
	}

	.tel p {
		display: inline-block;
	}

	.a {
		width: 9.3px;
		height: 19.6px;
		position: absolute;
		right: 10px;
		margin-top: 10px;
	}

	.a .right {
		width: 9.3px;
		height: 19.6px;
		position: absolute;
		right: 10px;
	}

	.li {
		width: 320px;
		height: 73.19px;
		background-color: white;
		display: flex;
	}

	.yue,
	.discounts {
		width: 105.64px;
		height: 73.19px;
		position: relative;
		border-right: 1px solid gainsboro;
	}

	.integral {
		width: 105.64px;
		height: 73.19px;
		position: relative;
	}

	.yue span,
	.discounts span,
	.integral span {
		color: #333333;
		font-size: 12px;
	}

	.changes {
		color: #FF9900;
	}

	.changes,
	.thren,
	.part {
		width: 105.64px;
		height: 48.3px;
		line-height: 48.3px;
		text-align: center;
		font-size: 24px;
	}

	.balance,
	.i {
		width: 105.64px;
		height: 24.89px;
		text-align: center;
		font-size: 12px;
		color: black;
	}

	.thren {
		color: #FF5F3E;
	}

	.part {
		color: #6ac20b;
	}

	.myorder {
		width: 320px;
		height: 110.94px;
		margin-top: 10px;
		background-color: white;
	}

	.int,
	.serve {
		width: 320px;
		height: 37.31px;
		font-size: 14px;
		line-height: 37.31px;
	}

	.int img {
		width: 13.91px;
		height: 14px;
		margin-top: 11px;
		margin-left: 10px;
	}

	.indent,
	.center,
	.download_img {
		width: 286.09px;
		height: 37.31px;
		float: right;
		right: 0;
		color: #333333;
	}

	.indent img,
	.center img,
	.download_img img {
		width: 9.33px;
		height: 9.33px;
		color: black;
		float: right;
		margin-right: 10px;
	}

	.serve {
		width: 320px;
		height: 74.62px;
		margin-top: 10px;
		background-color: white;
	}

	.serve_center,
	.download {
		width: 320px;
		height: 37.31px;
	}

	.serve_center img,
	.download img {
		width: 13.91px;
		height: 13.91px;
		margin-top: 11px;
		margin-left: 10px;
	}

	.bottom {
		position: fixed;
		width: 320px;
		height: 39px;
		background-color: white;
		display: flex;
		bottom: 0;
	}

	.take,
	.search,
	.order,
	.mine {
		width: 80px;
		height: 39px;
		text-align: center;
	}

	.take img,
	.search img,
	.order img,
	.mine img {
		width: 16px;
		height: 16px;
	}

	.take p,
	.search p,
	.order p,
	.mine p {
		font-size: 12px;
	}
</style>
